import 'package:flutter/material.dart';

class ParamsConfigPage extends StatefulWidget {
  final Map<String, dynamic>? params;

  const ParamsConfigPage(this.params, {super.key});

  @override
  State<ParamsConfigPage> createState() => _ParamsConfigPageState();
}

class _ParamsConfigPageState extends State<ParamsConfigPage> {
  List<Param> params = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
            leading: GestureDetector(
                child:
                    Container(width: kToolbarHeight, color: Colors.transparent, child: const Icon(Icons.arrow_back, color: Colors.black87)),
                onTap: () => Navigator.pop(context)),
            backgroundColor: Colors.white,
            elevation: 1.0,
            shadowColor: Colors.black26,
            actions: [_buildSaveAction(context)],
            centerTitle: true,
            title: const Text("Params Config", style: TextStyle(color: Colors.black87, fontSize: 18.0, fontWeight: FontWeight.w500))),
        body: _buildParams());
  }

  Widget _buildSaveAction(BuildContext context) {
    return GestureDetector(
        child: Container(
            width: kToolbarHeight,
            color: Colors.transparent,
            alignment: Alignment.center,
            child: const Text("保存", style: TextStyle(color: Colors.blue))),
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
          _saveConfig(context);
        });
  }

  Widget _buildParams() {
    List<Widget> children = [];
    children.add(Container(
        height: 40.0,
        margin: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
        decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.05),
            borderRadius: const BorderRadius.only(topLeft: Radius.circular(4.0), topRight: Radius.circular(4.0))),
        child: Row(children: [
          const Expanded(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.0),
                child: Text("Key", textAlign: TextAlign.left, style: TextStyle(fontWeight: FontWeight.bold)),
              )),
          Container(width: 1.0, height: 20.0, color: Colors.black12),
          const Expanded(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.0),
                child: Text("Value", textAlign: TextAlign.left, style: TextStyle(fontWeight: FontWeight.bold)),
              )),
          const SizedBox(width: 30.0)
        ])));
    for (Param element in params) {
      children.add(Container(
          height: 48.0,
          margin: const EdgeInsets.symmetric(horizontal: 8.0),
          decoration: BoxDecoration(border: Border.all(color: Colors.black.withOpacity(0.05))),
          child: Row(children: [
            Expanded(
                child: TextField(
                    controller: TextEditingController(text: element.key),
                    onChanged: (value) {
                      element.key = value;
                    },
                    style: const TextStyle(fontSize: 15.0),
                    decoration: const InputDecoration(
                        hintText: "Key", border: InputBorder.none, contentPadding: EdgeInsets.symmetric(horizontal: 10.0)))),
            Container(width: 0.5, color: Colors.black12),
            Expanded(
                child: TextField(
                    controller: TextEditingController(text: element.value),
                    onChanged: (value) {
                      element.value = value;
                    },
                    style: const TextStyle(fontSize: 15.0),
                    decoration: const InputDecoration(
                        hintText: "Value", border: InputBorder.none, contentPadding: EdgeInsets.symmetric(horizontal: 10.0)))),
            GestureDetector(
                child: const SizedBox(width: 30.0, child: Icon(Icons.remove, color: Colors.blue)),
                onTap: () {
                  params.remove(element);
                  setState(() {});
                })
          ])));
    }
    children.add(Center(
        child: GestureDetector(
            child: Container(
                margin: const EdgeInsets.all(6.0),
                padding: const EdgeInsets.all(6.0),
                decoration: const BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
                child: const Icon(Icons.add, color: Colors.white)),
            onTap: () {
              params.add(Param("", ""));
              setState(() {});
            })));
    return ListView(padding: const EdgeInsets.only(bottom: 20.0), children: children);
  }

  void _saveConfig(BuildContext context) {
    Map<String, dynamic> result = {};
    for (Param element in params) {
      result[element.key] = element.value;
    }
    Navigator.pop(context, result);
  }

  @override
  void initState() {
    super.initState();
    widget.params?.forEach((key, value) {
      params.add(Param(key, value));
    });
  }
}

class Param {
  String key;
  dynamic value;

  Param(this.key, this.value);
}
